<template>
	<view class="pt40 plr30">
		<view class="flex_sb mb50">
			<block v-for="item in tabList" :key="item.state">
				<view class="w220 ptb10 tac bd border-r4 bf" :class="dataForm.type == item.state? 'tit_active': ''"
					@click="dataForm.type = item.state">{{item.name}}</view>
			</block>
			<!-- <view class="w220 ptb10 tac bd border-r4 bf" :class="dataForm.type == 2? 'tit_active': ''" @click="dataForm.type = 1">投诉</view>
				<view class="w220 ptb10 tac bd border-r4 bf" :class="dataForm.type == 3? 'tit_active': ''" @click="dataForm.type = 2">其他</view> -->

		</view>
		<view class="">
			<view class="h60 pl10">反馈意见</view>
			<view class="h300 mb50 p24 bsb bf border-r1 shadow">
				<textarea class="pw100 bf" v-model.trim="dataForm.content" :show-count="false" :enableNative="false"
					:rows="4" auto-height style="min-height: 60upx;" placeholder="请输入您的反馈建议"
					placeholder-class="c9"></textarea>
			</view>

			<view class="h60 pl10">上传照片（最多3张）</view>
			<view class="mb20 ptb30 bsb bf border-r1 shadow" style="min-height: 300upx;">
				<robby-image-upload v-model="pics" :serverUrl="imgUploadUrl" fileKeyName="file" :form-data="formData"
					:showUploadProgress="true" :limit="3" @add="addImg"></robby-image-upload>
			</view>


		</view>

		<view class="plr60 pt100">
			<u-button type="primary" shape="circle" @click="submit">提交</u-button>
		</view>

	</view>
</template>

<script>
	import {
		HOST
	} from '@/config/index.js'
	import {
		Validator
	} from '@/utils/validate'
	import {
		feedBack
	} from '@/api/user.js'
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'
	export default {
		name: 'index',
		data() {
			return {
				tabList: [{
						name: '建议',
						state: 1
					},
					{
						name: '投诉',
						state: 2
					},
					{
						name: '其它',
						state: 3
					},
				],
				imgUploadUrl: HOST + '/common/upload',
				header: {
					'contentType': 'application/x-www-form-urlencoded',
					Authorization: 'abcdefghijklmnopqrstuvwxyz'
				},
				formData: {
					Authorization: 'abcdefghijklmnopqrstuvwxyz'
				},
				pics: [],
				dataForm: {
					type: 1, // 1：建议 2：投诉 3：其它
					content: '',
					img: []
				}
			}
		},
		methods: {
			addImg(e) {
				console.log(11, e)
				this.dataForm.img = [...this.dataForm.img, ...e.imgArr.map(item => item.fileName)]
			},
			submit() {
				const validator = new Validator()
				console.log('validator--', validator);
				validator.add(this.dataForm.content, [{
					strategy: 'isNoEmpty',
					errorMsg: '内容不能为空！'
				}])


				let errorMsg = validator.start()
				console.log('errorMsg--', errorMsg);
				if (errorMsg) {
					return this.toast(errorMsg)
				}
				if (this.dataForm.img.length == 0) {
					return this.toast('请上传图片')
				}

				this.feedback()
			},
			async feedback() {
				const data = JSON.parse(JSON.stringify(this.dataForm))
				console.log(data)
				data.img = data.img.join(',')
				const res = await feedBack(data)
				console.log(res)
				await this.confirm({
					content: '反馈成功',
					showCancel: false
				})
				this.back()
			}
		},
		components: {
			robbyImageUpload
		}
	}
</script>

<style scoped lang="scss">
	.tit_active {
		background-color: $primary;
		color: #fff;
	}
</style>
